<template>
	<view class="messagepage">
		//核心：骨架屏（加载中显示，加载完成隐藏）
		<view class="skeleton" v-if="isLoadingFirst">
			<!-- 1. 会话列表骨架 -->
			<view class="skeleton-section">
				<view class="skeleton-chat-item" v-for="(item, i) in 5" :key="i">
					<view class="skeleton-avatar"></view>
					<view class="skeleton-chat-content">
						<view class="skeleton-chat-title"></view>
						<view class="skeleton-chat-desc"></view>
					</view>
					<view class="skeleton-chat-right">
						<view class="skeleton-chat-time"></view>
						<view class="skeleton-chat-count"></view>
					</view>
				</view>
			</view>

			<!-- 2. 本地公共消息骨架 -->
			<view class="skeleton-section skeleton-public">
				<view class="skeleton-avatar"></view>
				<view class="skeleton-chat-content">
					<view class="skeleton-chat-title"></view>
					<view class="skeleton-chat-desc"></view>
				</view>
				<view class="skeleton-chat-right">
					<view class="skeleton-chat-time"></view>
				</view>
			</view>

			<!-- 3. 联系人列表骨架 -->
			<view class="skeleton-section">
				<!-- 联系人标题骨架 -->
				<view class="skeleton-contacts-title"></view>
				<!-- 联系人列表项骨架 -->
				<view class="skeleton-contacts-item" v-for="(item, i) in 6" :key="i">
					<view class="skeleton-avatar"></view>
					<view class="skeleton-contacts-content">
						<view class="skeleton-contacts-name"></view>
						<view class="skeleton-contacts-desc"></view>
						<view class="skeleton-contacts-phone"></view>
					</view>
					<view class="skeleton-contacts-arrow"></view>
				</view>
			</view>
		</view>
		<view class="content" v-else>
			<view class="area-a">
				<view class="area-loca-list">
					<view
						class="loca-wrappe"
						:class="{ chatselc: currentIndex === index }"
						v-for="(chat, index) in chatList"
						:key="index"
						@longpress="longPress(chat, index)"
						@click.stop="navto(chat, index)"
					>
						<chat-view-item :chatItem="chat"></chat-view-item>
					</view>
				</view>
				<view class="public-bar-placeholder">
					<view class="public-bar" :class="{ 'public-stick': publicStick }">
						<publicBar v-if="publicChat" @publicLongpress="publicLongpress" @handlePublic="handlePublic" :publicChat="publicChat"></publicBar>
					</view>
				</view>
				<!-- 本地消息 -->
			</view>

			<!-- 	联系人区 -->
			<view class="area-b">
				<view class="area-b-title-placeholder">
					<view class="area-b-title" :class="{ 'area-b-title-stick': titleStick }">
						<view class="title-box" v-if="!isPersonSearch">
							<view class="title-txt"><text>在邻里上的联系人</text></view>

							<view class="title-txt-add" @click="handleAddFriend">
								<text>添加好友</text>
								<uni-icons type="personadd" color="#55aaff"></uni-icons>
							</view>
						</view>

						<view class="search-area" v-if="isPersonSearch">
							<view class="search">
								<uni-search-bar
									@input="personSearch"
									v-model="keyword"
									radius="20"
									clear-button="auto"
									@clear="clearKeyword"
									@cancel="isPersonSearch = false"
									placeholder="搜索联系人/手机号"
								/>
							</view>
						</view>
					</view>
				</view>

				<view class="friends-list" v-if="contactsList.length">
					<view class="area-b-item" v-for="(item, index) in contactsList" :key="item.userId || index" @click="handleFriendClick(item)">
						<person :person="item"></person>
					</view>
				</view>
				<view class="no-contacts" v-else>
					<view class="no-contacts-img"><image class="img" src="/static/nomsg/1.png" mode="aspectFill"></image></view>
					<view class="btn-area">
						<view class=""><text>还没有好友哩！</text></view>
						<view class="btn" @click="handleAddFriend"><text>去添加好友</text></view>
					</view>
				</view>
				<view class="load-more" v-if="isLoading">
					<text>加载中...</text>
				</view>
			</view>
		</view>
		<!-- 加载更多提示 -->

		<view>
			<mainBotton :isBtnHidden="isBtnHidden"></mainBotton>
		</view>

		<uni-popup class="pop-left" type="left" ref="popLeft">
			<left-btn></left-btn>
		</uni-popup>
		<chat-title :show="!isAction" @popleft="popleft"></chat-title>
		<top-tool
			v-if="isAction"
			:isShow="isAction"
			@close="isAction = false"
			@handleTop="handleTop"
			:chatItem="chatItem"
			@removeFavorite="removeFavorite"
			@delChat="delChat"

		></top-tool>
		<play-voice :newMsg="newMsg"></play-voice>
		<add-friend :visible.sync="addFriendShow" @close="addFriendShow = false" @success="handleAddFriendSuccess"></add-friend>
	</view>
</template>

<script>
import leftBtn from '../../components/leftBtn.vue';
import * as chatFormat from '../../utils/chatFormat'; //获取收藏夹消息处理
import formatMessageTime from '../../utils/formatMessageTime'; //格式化消息时间
import ContactManager from '../../utils/ContactManager'; //通讯录处理
import AvatarFallback from '../../components/AvatarFallback.vue'; //生成无头像图片
import chatViewItem from '../../components/chatViewItem.vue';
import setToTarget from '../../utils/setTarget';
import topTool from '../../components/topTool.vue';
import chatTitle from '../../components/chatTitle.vue';
import publicBar from '../../components/publicBar.vue';
import playVoice from '../../components/playVoice.vue';
import { VoicePlayer } from '../../utils/VoicePlayer';
import person from '../../components/person.vue';
import mainBotton from '../../components/mainBotton.vue';
const friend = uniCloud.importObject('friend', { customUI: true });
import addFriend from '../../components/addFriend/addFriend.vue';
// import recordManger from '../../components/recordManger.vue';

export default {
	components: { leftBtn, AvatarFallback, chatViewItem, topTool, chatTitle, publicBar, playVoice, person, mainBotton, addFriend },
	computed: {
		storeData() {
			return this.$store.state.msg;
		},
		newMsg() {
			return this.$store.state.msg.newMessage;
		},
		publicStore() {
			return this.$store.state.msg.publicMessageList;
		},
		location() {
			return this.$store.state.msg.location;
		}
	},
	watch: {
		newMsg: {
			//收到新消息时的会话列表的变化
			handler: async function (newval) {
				console.warn('信息变化');
				if (!newval || Object.keys(newval).length === 0) return;
				//收藏，群，和个人）
				try {
					const newlist = await chatFormat.newMsg(newval, this.chatList);

					this.chatList = [...newlist];
					if (newval.toTarget.targetType === '1') {
						const res = await chatFormat.setLocationPublicMsg(newval, this.publicChat);
						console.log('+++++++本地消息+++', res);
						if (res) this.publicChat = res;
					}
				} catch (e) {
					console.error(e);
				}
			},
			deep: true,
			immediate: true
		},
		location: {
			handler(newval) {
				try {
					this.publicChat = chatFormat.publicChat(newval);
				} catch (e) {
					console.error(e);
				}
			},
			immediate: true,
			deep: true
		}
	},

	data() {
		return {
			chatList: [],
			userList: [],
			friendsList: [],
			windowHeight: 0,
			barShow: true,
			isBtnHidden: false,
			lastScrollTop: 0,
			scrollTimer: null,
			lastTimeMap: {},
			isLoadingFirst: false,
			favoriteChat: [],
			publicChat: {},
			resetCount: 0,
			isPersonSearch: false,
			areaLocaHeight: 0,
			currentIndex: -1,
			page: 1,
			isFirstShow: true,
			isAction: false,
			scrollHeight: 0,
			// 通讯录相关（修复：统一状态变量名）
			contactsList: [],
			currentPage: 1,
			pageSize: 15,
			searchDebounceTimer: null,
			isSelcPublic: false,
			heightTimer: null,
			publicStick: false, //锁定本地栏
			isLoading: false, // 统一使用isLoading，避免与isLoadingMore混淆
			contactManager: null,
			currentUserId: '',
			chatItem: {},
			keyword: '',
			searchShow: false,
			titleStick: false,
			addFriendShow: false
		};
	},
	// 修复：滚动加载逻辑，使用正确的状态变量
	onPageScroll(e) {
		const { scrollTop } = e;
		this.isAction = false;
		// 初始化滚动高度为正数（避免初始值异常）
		if (this.scrollHeight === undefined || this.scrollHeight < 0) {
			this.scrollHeight = 0;
		}

		// 防抖处理：减少DOM查询频率
		if (this.heightTimer) clearTimeout(this.heightTimer);
		this.heightTimer = setTimeout(() => {
			// 同时获取.content和.area-loca的信息
			uni.createSelectorQuery()
				.in(this)
				// 获取滚动内容总高度
				.select('.content')
				.boundingClientRect((rect) => {
					// 容错：元素不存在时保持原有高度，避免异常
					this.scrollHeight = rect ? Math.max(0, rect.height) : this.scrollHeight;
				})

				.exec();
			uni.createSelectorQuery()
				.in(this)
				.select('.public-bar-placeholder')
				.boundingClientRect((res) => {
					if (res) {
						this.publicStick = res.bottom > 784;
					}
				})
				.exec();
			uni.createSelectorQuery()
				.in(this)
				.select('.area-b-title-placeholder')
				.boundingClientRect((res) => {
					if (res) {
						if (res.top < 80) {
							this.isPersonSearch = true;
						} else if (res.top >= 80 && !this.keyword) {
							this.isPersonSearch = false;
						}
						this.titleStick = res.top < 100;
					}
				})
				.exec();
		}, 100);

		// 获取视口高度（兜底处理）
		const windowHeight = Math.max(0, this.windowHeight || uni.getSystemInfoSync().windowHeight);

		// 触发加载更多的条件（增加scrollHeight有效性判断）
		const loadMoreThreshold = 100;
		const shouldLoadMore =
			this.scrollHeight > 0 && // 确保内容高度有效
			scrollTop + windowHeight >= this.scrollHeight - loadMoreThreshold &&
			!this.isLoading;

		if (shouldLoadMore) {
			if (this.loadMoreTimer) clearTimeout(this.loadMoreTimer);
			this.loadMoreTimer = setTimeout(() => {
				this.loadMore(this.keyword);
			}, 500); // 延迟500ms，避免高频触发
		} else {
			// 不满足条件时清除定时器，避免无效执行
			if (this.loadMoreTimer) clearTimeout(this.loadMoreTimer);
		}

		// 处理按钮显示/隐藏
		if (this.scrollTimer) clearTimeout(this.scrollTimer);
		this.scrollTimer = setTimeout(() => {
			this.isBtnHidden = scrollTop > this.lastScrollTop;
			this.lastScrollTop = scrollTop;
		}, 30);
	},
	async mounted() {
		const systemInfo = this.$store.state.msg.systemInfo;
		this.windowHeight = systemInfo?.windowHeight || 0;
		uni.$on('AppHide', () => {
			this.setStoreLastData();
		});
		uni.$on('reload',()=>this.reload())
	},
	onLoad() {
		console.warn('页面加载');
		// 初始化当前用户ID
		this.firstLoadData();

		this.currentUserId = this.storeData?.user?.userId;
		if (!this.currentUserId) {
			uni.showToast({ title: '请先登录', icon: 'none' });
			return;
		}
		// 初始化通讯录管理器
		this.contactManager = new ContactManager(this.storeData.user, []);
		// 首次加载通讯录
		this.loadBothData();
	},
	async onShow() {
		this.$store.commit('msg/SET_queryParam', { type: 'chat' });
		if (this.isFirstShow) {
			this.isFirstShow = false;
			return;
		}

		// 2. 非首次显示（从其他页面返回）：执行完整逻辑（状态更新 + 刷新数据）

		this.$store.commit('msg/SET_isFly', false);
		if (this.$store.state.msg.senderLocation) {
			this.$store.commit('msg/SET_location', this.$store.state.msg.senderLocation);
		}

		console.log('已经刷新');
	},

	beforeDestroy() {
		console.log('beforDestroy');
		uni.$off('AppHide');
		// 清理所有定时器，防止内存泄漏
		if (this.heightTimer) clearTimeout(this.heightTimer);
		if (this.scrollTimer) clearTimeout(this.scrollTimer);
		if (this.loadMoreTimer) clearTimeout(this.loadMoreTimer); // 新增
		if (this.searchDebounceTimer) {
			clearTimeout(this.searchDebounceTimer);
		}
		uni.$off('reload')
	},
	methods: {
		formatMessageTime,
		reload() {
			this.loadBothData();
			this.isAction = false;
		},
		//首次初始数据（骨架屏加快照）
		firstLoadData() {
			this.isLoadingFirst = true; // 开始加载，显示骨架屏
			try {
				// 读取本地快照，默认空对象避免解构报错
				const { chatList = [], contactsList = [] } = uni.getStorageSync('lastStore') || {};
				// 赋值时确保是数组（避免非数组类型导致渲染错误）
				this.chatList = Array.isArray(chatList) ? chatList : [];
				this.contactsList = Array.isArray(contactsList) ? contactsList : []; // 统一变量名为 contactsList
			} catch (e) {
				this.chatList = [];
				this.contactsList = [];
			} finally {
				this.isLoadingFirst = false; // 加载完成，隐藏骨架屏（统一状态变量）
			}
		},
		handleAddFriend() {
		
			this.addFriendShow = true;
		},
		handleAddFriendSuccess() {},
		setStoreLastData() {
			try {
				// 1. 处理聊天列表（直接复制，避免引用原数组）
				const chatList = [...this.chatList];
				const contacts = this.contactsList.length > 20 ? this.contactsList.slice(0, 20) : [...this.contactsList];
				uni.setStorageSync('lastStore', {
					chatList: chatList,
					contactsList: contacts, // 保持键名兼容，值使用处理后的数组
					timestamp: Date.now() // 新增时间戳，便于后续判断快照是否过期
				});
			} catch (e) {
				console.error('保存快照失败：', e);
			}
		},
		async loadBothData() {
			try {
	
				this.isLoading = true;
				// 并行加载通讯录和新会话列表
				const [contactsList, newChatList] = await Promise.all([
					this.loadContacts(this.keyword), // 加载通讯录
					this.getviewList() // 加载最新会话数据
				]);

				// 通讯录数据直接赋值
				this.contactsList = contactsList;
				// 合并：组件现有chatList（旧数据）与新请求的newChatList，按类型去重，再按时间降序
				const mergedChatList = chatFormat.chatView(this.chatList, newChatList);
				//	this.publicChat=chatFormat.publicChat(this.storeData.location)
            
				this.chatList = mergedChatList;
			} catch (error) {
				console.log(e);
			} finally {
				this.isLoading = false;
			}
		},
		clearKeyword() {
			this.keyword = '';
			this.currentPage = 1;
		},
		personSearch(e) {
			this.currentPage = 1;
			//this.keyword = e.detail.value;
			console.log('', this.keyword);
			if (this.searchDebounceTimer) {
				clearTimeout(this.searchDebounceTimer);
			}
			this.searchDebounceTimer = setTimeout(async () => {
				try {
					const params = {
						userId: this.storeData.user.userId,
						keyword: this.keyword,
						page: this.currentPage,
						pageSize: this.pageSize
					};

					const res = await friend.getFriendList(params);
					console.log('搜索结果', res);
					if (res.success && res.data && res.data.length) {
						this.contactsList = res.data;
					} else {
						// 如果搜索结果为空，也清空列表
						this.contactsList = [];
					}
				} catch (error) {
					console.error('搜索出错', error);
				}
			}, 600); // 4. 延迟 300 毫秒执行搜索
		},

		async handlerSearchPerson() {
			this.isPersonSearch = !this.isPersonSearch;

			try {
				if (!this.isPersonSearch) {
					this.keyword = '';
					const parma = {
						userId: this.storeData.user.userId,
						keyword: this.keyword,
						page: this.currentPage,
						pageSize: this.pageSize
					};

					const { success, data } = await friend.getFriendList(parma);
					if (success) {
						this.contactsList = data;
					} else {
						this.contactsList = [];
					}

					console.log(data);
				}
			} catch (e) {
				console.error(e);
			}
		},

		// 首次加载通讯录
		async loadContacts(keyword) {
			return new Promise(async (resolve, reject) => {
				this.currentPage = 1; // 重置为第1页
				try {
					const res = await this.contactManager.loadContacts(this.currentPage, this.pageSize, keyword);

					if (res.success && res.data.length) {
						this.contactsList = res.data;

						resolve(res.data);
					} else {
						(this.contactsList = []), reject([]);
					}
				} catch (e) {
					console.error('加载通讯录失败：', error);

					reject([]);
				}
			});
		},
		async getviewList() {
			return new Promise(async (resolve, reject) => {
				try {
					const listNow = await chatFormat.chatFormat();

					resolve(listNow);
				} catch (error) {
					console.error('获取会话列表失败：', error);
					reject([]);
				}
			});
		},

		// 加载更多通讯录（修复：正确判断全量数据是否已加载完毕）

		async loadMore(keyword) {
			if (this.isLoading) return;
			this.isLoading = true;
			try {
				const nextPage = this.currentPage + 1;
				const parma = {
					userId: this.storeData.user.userId,
					keyword: keyword,
					page: nextPage,
					pageSize: this.pageSize
				};
				const { success, data } = await friend.getFriendList(parma);
				if (success && data.length) {
					this.contactsList = [...this.contactsList, ...data];
					this.currentPage = nextPage;
				} else {
					uni.showToast({ title: '已加载全部', icon: 'none' });
				}
			} catch (e) {
				console.error('加载更多联系人失败：', e);
			} finally {
				this.isLoading = false;
			}
		},

		// 手动同步通讯录
		async handleSync() {
			try {
				await this.contactManager.reset();
				this.loadContacts();
			} catch (e) {
				console.error(e);
			}
		},

		handleAvatarError(item) {
			item.customize_pic = '';
		},
		delChat(e) {
			if (e) {
				this.chatList.splice(this.currentIndex, 1);
				console.log('删除后的会话列表', this.chatList);
			} else {
				uni.showToast({
					title: '删除会话失败'
				});
			}
		},
		//左边菜单
		popleft() {
			this.$refs.popLeft.open();
		},
		//到聊天页面
		navto(chat, index) {
			console.log('路由跳转', chat, index);
			try {
				if (this.currentIndex !== -1 || this.isAction) {
					this.currentIndex = -1;
					this.isAction = false;
					return;
				}
				// 复制一份原参数（避免直接修改可能的响应式对象，视场景可选）
				const queryParam = {}; // 假设 queryParam 来自 this，需先获取

				if (chat.type === 'person') {
					queryParam.id = chat.userId;
					queryParam.type = 'person';

					setToTarget('person', { targetId: chat.userId, nicName: chat.title, nicPic: chat.avatarList[0].url || '' });

					this.$store.commit('msg/SET_queryParam', queryParam);
					uni.navigateTo({
						url: '/pages/messages/messages',
						success: () => {
							this.chatList[index].badgeText = 0;
						}
					});
				} else if (chat.type === 'group') {
					queryParam.id = chat.groupId;
					queryParam.type = 'group';

					this.$store.commit('msg/SET_queryParam', queryParam);
					setToTarget('group', { groupId: chat.groupId, groupName: chat.title });
					uni.navigateTo({
						url: '/pages/messages/messages',
						success: () => {
							this.chatList[index].badgeText = 0;
						}
					});
				} else if (chat.type === 'favorite' && chat.location && Object.keys(chat.location).length > 0) {
					queryParam.id = chat.favorite_id;
					queryParam.location = chat.location;
					queryParam.type = chat.type;
					this.$store.commit('msg/SET_queryParam', queryParam);
					this.$store.commit('msg/SET_isFly', true);
					if (!chat.location || Object.keys(chat.location).length === 0) {
						console.error('无定位坐标');
						return;
					}
					setToTarget('favorite', { favorite_id: chat.favorite_id, favorite_name: chat.title, location: chat.location });
					this.$store.commit('msg/SET_location', chat.location);
					uni.navigateTo({
						url: '/pages/main/main',
						success: () => {
							this.chatList[index].badgeText = 0;
						}
					});
				} else {
					console.warn('其它类型消息或缺少必要参数待开发：', chat.type);
					return;
				}
			} catch (e) {
				console.warn(e);
			}
		},
		//到聊天页面（公共栏）
		handlePublic() {
			try {
				this.isSelcPublic = false;
				this.currentIndex = -1;
				this.isAction = false;
				// 1. 先更新 Vuex 状态（确保目标页面加载时能读到最新状态）
				this.$store.commit('msg/SET_queryParam', {
					type: 'public',
					location: this.$store.state.msg.senderLocation
				});
				this.$store.commit('msg/SET_isFly', false);
				this.$store.commit('msg/SET_location', this.$store.state.msg.senderLocation);
				setToTarget('public', { targetName: this.address });
				// 2. 再执行路由跳转（状态更新后再跳转，避免目标页面读取旧值）

				this.publicChat = { ...this.publicChat, unreadCount: 0 };

				uni.navigateTo({
					url: '/pages/main/main'
				});
			} catch (e) {
				console.error(e);
			}
		},
		publicLongpress() {
			this.isSelcPublic = true;
			const location = this.$store.state.msg.location;
			this.chatItem = { ...this.publicChat, location };
			this.isAction = true;
		},
		//导航栏右边到地图模式
		toMap() {
			uni.navigateTo({ url: '/pages/main/main' });
		},
		handleTop() {
			if (!this.chatItem?.isTop) {
				const newMsg = { ...this.chatItem, isTop: true };
				this.chatList.splice(this.currentIndex, 1);
				this.chatList = [newMsg, ...this.chatList];
			} else {
				const newMsg = { ...this.chatItem, isTop: false };
				this.chatList.splice(this.currentIndex, 1);
				this.chatList = [...this.chatList, newMsg];
			}
			this.currentIndex = -1;
		},

		fabClick(e) {
			e?.stopPropagation();
		},
		//按朋友栏
		handleFriendClick(item) {
			console.log('朋友中转', item);
			if (!item) return;
			let queryParam;
			if (item.friendUserId) {
				queryParam = {
					type: 'person',
					id: item.friendUserId,
					userTel: ''
				};

				setToTarget('person', { targetId: item.friendUserId, ...item });
				console.log('navoto....', this.$store.state.msg.toTarget);
			} else {
				uni.showToast({
					title: '非本应用用户',
					icon: 'fail'
				});
			}

			this.$store.commit('msg/SET_queryParam', queryParam);
			uni.navigateTo({ url: '/pages/messages/messages' });
		},
		//长按会话菜单
		longPress(chat, index) {
			if (this.currentIndex === index) {
				this.isAction = false;
				this.currentIndex = -1;
				this.chatItem = {};
			} else {
				this.currentIndex = index;
				this.isAction = true;
				this.chatItem = chat;
			}
		},
		//私密功能点击重通讯内存
		reset() {
			this.resetCount++;
			if (this.resetCount === 7) {
				uni.showModal({
					title: '是否重置通讯录',
					success: (res) => {
						if (res.confirm) {
							this.contactManager.reset();
						}
					}
				});
			}
		},
		removeFavorite(targetItem) {
			// 重命名参数，避免与回调中的变量冲突
			this.isAction = false;
			this.currentIndex = -1;
			if (targetItem.type === 'favorite') {
				const idx = this.chatList.findIndex(
					(item) => item.favorite_Id === targetItem.favorite_Id // 用 targetItem 表示外部传入的项
				);

				console.log('要取消的', this.chatList[idx]);
				// 确保找到有效索引后再删除
				if (idx !== -1) {
					this.chatList.splice(idx, 1);
					// 可选：同步删除 Vuex 或数据库中的数据
				} else {
					console.warn('未找到要删除的收藏项', targetItem);
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
/* 保持原有样式不变 */
.messagepage {
	width: 100vw;
	min-height: 100vh;
	background-color: rgba(0, 0, 0, 0.03);
}
.pop-left {
	z-index: 200;
}

.content {
	padding-top: 140rpx;
	min-height: 100vh;
	background-color: #f3f3f3;
	gap: 25rpx;
	flex: 1;
	padding-bottom: 30rpx;

	.area-a {
		margin-bottom: 20rpx;
	}
}
.chat-custom-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}
.chat-custom-text {
	font-size: 12px;
	color: #999;
}
.public-bar-placeholder {
	height: 73px; /* 假设 publicBar 高度是 80rpx */
	//	visibility: hidden; /* 隐藏占位符，仅保留高度 */
}

.public-bar.public-stick {
	position: fixed;
	bottom: 0; /* 这个值需要根据你的页面布局精确调整 */
	left: 0;
	right: 0;
	z-index: 200;
	/* 可能还需要添加背景色，以覆盖下方滚动的内容 */
	background-color: #f1f1f1;
	/* 添加一个阴影，增强层次感 */
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.area-b-title-stick {
	position: fixed;
	top: 165rpx;
	left: 0;
	right: 0;
	z-index: 200;
}
.area-b {
	padding: 0rpx 25rpx;
	display: flex;
	background-color: #f1f1f1;
	flex: 1;
	flex-direction: column;
	// background-color: #ff557f;
	// border-radius: 16rpx;
	// margin: 20rpx 20rpx 20rpx;
	.area-b-title {
		width: 100%;
		padding: 10rpx 20rpx;
		background-color: #e0e0e0;
		height: 60rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #55aaff;

		font-weight: bolder;
		border-bottom: 1px solid #f5f5f5;
	}
	.search-area {
		display: flex;
		width: 100%;
		padding: 0 50rpx;
	}
	.title-box {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	.title-txt-add {
		display: flex;
		font-weight: 500;
		margin-right: 25rpx;
	}
	.title-txt {
		padding: 0 25rpx;
		font-weight: bolder;
		font-size: 28rpx;
	}
	.area-b-title-placeholder {
		height: 80rpx;
	}
	.friends-list {
	}
	.search {
		width: 100%;
	}
}
.no-contacts {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	margin-top: 50rpx;
	gap: 50rpx;
	flex: 1;
	.no-contacts-img {
		width: 300rpx;
		height: 300rpx;
		border-radius: 15rpx;
		.img {
			width: 300rpx;
			height: 300rpx;
			border-radius: 15rpx;
		}
	}
}
.btn-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 25rpx;
	.btn {
		background-color: #55aaff;
		color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		:active {
			background-color: #7cbcff;
		}
	}
}
.load-more {
	width: 100%;
	padding: 15rpx;
	text-align: center;
	color: #e2e2e2;
	font-size: 26rpx;
}
.chatselc {
	background-color: #d4d4d4;
}
.area-loca {
	padding: 20rpx 15rpx;
	background-color: #ffffff;
	margin: 20rpx 20rpx;
	border-radius: 16rpx;
	gap: 5rpx;
	.loca-wrapper {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f5f5f5; /* 与联系人列表样式统一 */
		cursor: pointer; /* 提示可点击 */
		transition: background-color 0.2s;

		&:active {
			background-color: #f8f8f8; /* 点击时背景高亮 */
		}
	}
}
.area-loca-list {
	margin: 10rpx 20rpx;
	padding: 0rpx 15rpx;
	background-color: #fff;
	border-radius: 16rpx;
	border-bottom: 1px solid #f5f5f5;
}

.skeleton {
	padding: 170rpx 20rpx 120rpx;
	background-color: #d4d4d4;
	display: flex;
	flex-direction: column;
	gap: 25rpx;
}

/* 骨架屏分区容器：对应原 area-a/area-b 的白色背景 */
.skeleton-section {
	padding: 10rpx 15rpx;
	background-color: #fff;
	border-radius: 16rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

/* 本地公共消息骨架：单独调整间距（与原 stickLocaDom 对齐） */
.skeleton-public {
	margin-top: 20rpx;
	flex-direction: row;
	align-items: center;
	padding: 20rpx 15rpx;
}

/* 骨架屏动画：渐变流动效果 */
.skeleton-avatar,
.skeleton-chat-title,
.skeleton-chat-desc,
.skeleton-chat-time,
.skeleton-chat-count,
.skeleton-contacts-title,
.skeleton-contacts-name,
.skeleton-contacts-desc,
.skeleton-contacts-phone,
.skeleton-contacts-arrow {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite;
	border-radius: 8rpx;
}

@keyframes skeleton-loading {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* 1. 会话列表骨架样式 */
.skeleton-chat-item {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 10rpx 0;
	border-bottom: 1px solid #f5f5f5;
}

.skeleton-avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 10rpx;
	flex-shrink: 0;
}

.skeleton-chat-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.skeleton-chat-title {
	width: 60%;
	height: 32rpx;
}

.skeleton-chat-desc {
	width: 80%;
	height: 24rpx;
}

.skeleton-chat-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12rpx;
}

.skeleton-chat-time {
	width: 120rpx;
	height: 22rpx;
}

.skeleton-chat-count {
	width: 40rpx;
	height: 36rpx;
	border-radius: 18rpx;
}

/* 2. 联系人列表骨架样式 */
.skeleton-contacts-title {
	width: 30%;
	height: 32rpx;
	margin: 0 0 20rpx 20rpx;
}

.skeleton-contacts-item {
	display: flex;
	align-items: center;
	gap: 40rpx;
	padding: 10rpx 0;
	border-bottom: 1px solid #f5f5f5;
}

.skeleton-contacts-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.skeleton-contacts-name {
	width: 40%;
	height: 30rpx;
}

.skeleton-contacts-desc {
	width: 60%;
	height: 24rpx;
}

.skeleton-contacts-phone {
	width: 50%;
	height: 22rpx;
}

.skeleton-contacts-arrow {
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
	opacity: 0.5;
}

// 可选：给所有图标统一设置大小和间距（避免样式重复）
</style>
